<template>
    <div class="row lyear-wrapper" v-loading="loading"
         element-loading-text="正在登陆">
        <div class="lyear-login">
            <div class="login-center">
                <div class="login-header text-center">
                    <a href="javascript:void(0);"> <img alt="light year admin" src="/backend/images/logo-sidebar.png"> </a>
                </div>
                <form action="#!" method="post">
                    <div class="form-group has-feedback feedback-left">
                        <input type="text" placeholder="请输入您的用户名" class="form-control" name="username" id="username" v-model="username"/>
                        <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
                    </div>
                    <div class="form-group has-feedback feedback-left">
                        <input type="password" placeholder="请输入密码" class="form-control" id="password" name="password" v-model="password" autocomplete="off"/>
                        <span class="mdi mdi-lock form-control-feedback" aria-hidden="false"></span>
                    </div>
                    <div class="form-group has-feedback feedback-left row">
                        <div class="col-xs-7">
                            <input type="text" name="captcha" class="form-control" placeholder="验证码" v-model="captcha" v-on:keyup.enter="login" autocomplete="off">
                            <span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
                        </div>
                        <div class="col-xs-5">
                            <img :src="captchaImg" class="pull-right" id="captcha" style="cursor: pointer;" v-on:click="generateCode()" title="点击刷新" alt="captcha">
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-block btn-primary" type="button" v-on:click="login()">立即登录</button>
                    </div>
                </form>
                <hr>
                <footer class="col-sm-12 text-center">
                    <p class="m-b-0">Copyright © 2019 <a href="javascript:void(0)"> 微保典后台管理系统</a>. All right reserved</p>
                </footer>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "LoinComponent",
        data() {
            return {
                username: '',
                password: '',
                captcha:'',
                captchaImg:'',
                loading:false
            }
        },
        methods:{
            generateCode: function () { //生成验证码
                let self = this;
                let uri = "login-captcha";
                axios.get(uri).then(function (result) {
                    if (result.status === 'succeed') {
                        let dataImg = result.data.url;
                        self.captchaImg =dataImg.img
                    }
                });
            },
            login:function () { //登录
                let self = this;
                self.loading = true;
                let uri = "login";
                var params = {name:self.username,password:self.password,captcha:self.captcha};
                axios.post(uri,params).then(function (result) {
                    self.loading = false;
                    if (result.status === 'succeed') {
                        window.location.href = '/admin';
                    }
                }).catch(function (error) { // 请求失败处理
                    var data = error.response.data;
                    self.$message({
                        message: data.error.msg,
                        type: 'warning'
                    });
                    self.loading = false;
                    self.generateCode();
                });
            }
        },
        mounted: function () {
            this.generateCode();
        }
    }
</script>

<style scoped>

</style>
